<template>
  <!-- 点击选择分类——浮动 -->
  <div class="select_sort" @mouseleave="screenMouseleave">
    <!-- v-show="screenChecked" -->
    <div class="sort_left">
      <div
        :class="['sort_div', v.select ? 'active1' : '']"
        v-for="(v, i) in screenList"
        :key="i"
        @click.stop="screenListClick(i)"
      >
        {{ v.tit }}
      </div>
    </div>
    <div class="sort_right">
      <div class="right_all">全部</div>
      <div class="right_div">
        <div
          :class="['sort_div', v1.select  ? 'active1' : '']"
          v-for="(v1, i1) in childList"
          :key="i1"
          @click.stop="screenLIstConClick(i1)"
        >
          {{ v1.tit }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //内容——左——列3——是否打开
      // screenChecked: false,
      //内容——左——列3——屏幕模式-左
      //   screenListChecked: null,
      //   screenList: ["横屏模式", "竖屏模式"],
      //内容——左——列3——屏幕模式-右
      //   screenLIstConChecked: null,
      screenLIstCon: [
        "行政办公",
        "公告通知",
        "招聘求职",
        "个人简介",
        "员工关怀",
        "工牌工作证",
        "新微商",
        "手机海报",
        "方形图",
        "日签",
        "行政办公",
        "公告通知",
        "招聘求职",
        "个人简介",
        "员工关怀",
        "工牌工作证",
        "新微商",
        "手机海报",
        "方形图",
        "日签",
      ],
      screenList: [
        {
          tit: "横屏模式",
          select: false,
          list: [
            { select: false, tit: "1111111111" },
            { select: false, tit: "公告通知" },
            { select: false, tit: "招聘求职" },
            { select: false, tit: "个人简介" },
            { select: false, tit: "员工关怀" },
            { select: false, tit: "工牌工作证" },
            { select: false, tit: "新微商" },
            { select: false, tit: "手机海报" },
            { select: false, tit: "方形图" },
            { select: false, tit: "日签" },
            { select: false, tit: "行政办公" },
            { select: false, tit: "公告通知" },
            { select: false, tit: "招聘求职" },
            { select: false, tit: "个人简介" },
            { select: false, tit: "员工关怀" },
          ],
        },
        {
          tit: "竖屏模式",
          select: false,
          list: [
            { select: false, tit: "222222222" },
            { select: false, tit: "方形图" },
            { select: false, tit: "日签" },
            { select: false, tit: "行政办公" },
            { select: false, tit: "公告通知" },
            { select: false, tit: "招聘求职" },
            { select: false, tit: "个人简介" },
            { select: false, tit: "员工关怀" },
            { select: false, tit: "行政办公" },
            { select: false, tit: "公告通知" },
            { select: false, tit: "招聘求职" },
            { select: false, tit: "个人简介" },
            { select: false, tit: "员工关怀" },
            { select: false, tit: "工牌工作证" },
            { select: false, tit: "新微商" },
          ],
        },
      ],
      childList: [],
    };
  },
  methods: {
    //内容——左——列3——屏幕模式——鼠标离开消失
    screenMouseleave() {
      //   this.screenChecked = false;
      //   this.materialListTit.forEach((v) => {
      //     v.select = false;
      //     v.border = false;
      //   });
      //   this.materialListTit[0].select = true;
      //   this.materialListTit[0].border = false;
      this.$emit('childwelleave',false)
    },
    //内容——左——列3——屏幕模式-左-点击选中
    screenListClick(i) {
      this.screenList.forEach((v) => {
        v.select = false;
        //     v.border = false;
        //   });
      });
      this.screenList[i].select = true;
      this.childList = this.screenList[i].list;
    },
    //内容——左——列3——屏幕模式-右-点击选中
    screenLIstConClick(i) {
      this.childList.forEach((v) => {
        v.select = false;
        //     v.border = false;
        //   });
      });
      this.childList[i].select = true;
    },
  },
  mounted() {
    this.childList = this.screenList[0].list;
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.model {
  float: left;
  width: 90px;
  height: 100%;
}
.modeldiv {
  width: 100%;
  height: 36px;
  margin-bottom: 12px;
  border-radius: 6px;
  .cen();
}
.select_sort {
  position: absolute;
  // right: -251px;
  top: 0;
  left: 261px;
  width: 240px;
  height: 500px;
  border-radius: @radius1;
  background: #fff;
  box-shadow: @shadow;
  padding: 18px 0 18px 10px;
  z-index: 999999;
  .sort_left {
    margin-right: 12px;
    .model();
    .roll();
    .sort_div {
      cursor: pointer;
      .modeldiv();
    }
  }
  .sort_right {
    .model();
    .right_all {
      width: 100%;
      height: 36px;
      .cen();
      .roll();
    }
    .right_div {
      height: calc(100% - 48px);
      overflow-y: auto;
      width: 115px;
      .sort_div {
        cursor: pointer;
        .modeldiv();
      }
    }
  }
  // .sort_left {

  // }
  // .sort_right {
  //   float: left;
  //   width: 90px;
  //   height: 100%;
  //   background-color: rgb(124, 155, 155);

  // }
}
</style>